<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no"
    />
    <title>函数</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <style>
      .list {
        display: none;
        list-style: none;
        background-color: #ff9966;
        margin: 0;
        padding: 0;
        width: 300px;
      }
      .list li {
        margin: 0;
        padding: 0;
        padding: 10px;
        border-bottom: 1px solid #fff;
        text-align: center;
      }
      h3:hover {
        cursor: pointer;
        color: blue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <button onclick="fn()">点击我</button>
    </div>
    <div>
      <h3 onclick="show()">点击显示列表</h3>
      <ul class="list">
        <li>html</li>
        <li>css3</li>
        <li>javascritp</li>
        <li>jquery</li>
        <li>cavas</li>
      </ul>
    </div>
    <div>
      <button onclick="fn5()">点击显示新年祝福</button>
      <div class="msg">......</div>
    </div>
    <script src="./js/index.js"></script>
  </body>
</html>
<!--
  1 函数是程序的基本单元，是执行特定功能的代码块，其定义的代码是局部作用域
  2 function functionname (){
    // 函数体
  }
  3 函数的分类
    3-1 系统函数 和 自定义的函数
    3-2 有参函数 和 无参函数
    3-3 有返回值函数 和 无返回值函数
    3-4 普通函数 和 回调函数
    3-5 构造函数
    3-6 箭头函数
-->
